<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">

<head>

    <%@include file="common/head.jsp" %>

</head>

<body>

<!-- Top menu -->
<%@include file="common/header.jsp" %>

<!-- Presentation -->
<div class="presentation-container">
    <div class="container">
        <div class="row">
            <div class="col-sm-12 wow fadeInLeftBig">
                    <h1><span class="colored-text">EasilyJ</span> - 学Java,从遇见对象开始</h1>
                <p>
                    站长寄语：你终将会成为你所追寻的模样
                </p>
            </div>
        </div>
    </div>
</div>

<!-- Services -->
<div class="services-container">
    <div class="container">
        <div class="row">
            <c:forEach items="${articleCategoryList}"  var="articleCategoty">
                <div class="col-sm-3">
                    <div class="service wow fadeInUp">
                        <div class="service-icon"><span aria-hidden="true" class="${articleCategoty.articleCategoryIcon}"></span></div>
                        <h3>${articleCategoty.articleCategoryTitle}</h3>
                        <p>${articleCategoty.articleCategoryIntroduce}</p>
                        <a class="big-link-1" href="/articleCategoryFirst?articleCategoryId=${articleCategoty.articleCategoryId}">Read more</a>
                    </div>
                </div>
            </c:forEach>
        </div>
    </div>
</div>

<div class="services-container">
    <div class="container">
        <div class="row">
            <div class="col-sm-12 work-title wow fadeIn">
                <h2>最新发布</h2>
            </div>
        </div>
        <div class="row">
            <c:forEach items="${articles}"  var="article">
                <div class="col-sm-3">
                    <div class="service wow fadeInUp">
                        <div class="service-icon"><span aria-hidden="true" class="${article.articleIcon}"></span></div>
                        <h3>${article.articleTitle}</h3>
                        <%--<p>${fn:substring(article.articleContent, 0, 50)}...</p>--%>
                        <a class="big-link-1" href="/articleDetail?articleId=${article.articleId}">Read more</a>
                    </div>
                </div>
            </c:forEach>
        </div>
    </div>
</div>

<!-- Footer -->
<%@include file="common/footer.jsp" %>

<!-- Javascript -->
<%@include file="common/scripts.jsp" %>

</body>

</html>